<template>
	<pro-table ref="protable" :loadDataUrl="loadDataUrl" rowKey="id" :columns="columns" :isRowSelection="true" @selectedRowChange="onSelectChange">
		<!-- 面包屑导航栏右侧按钮，可以不配置 -->
		<template slot="footer">
			<a-button class="ant-btn-success" @click="editUser()">新增</a-button>
		</template>
		<a href="javascript:;" @click="editUser(record)" slot="activityName" slot-scope="{ text, record, index }">{{ text }}</a>
		<template slot="status" slot-scope="{ text, record, index }">
			<a-tag :color="text == 0 ? '#247cf0' : '#f50'">{{ text == 0 ? '启用' : '停用' }}</a-tag>
		</template>
		<!-- 这些是 table中插槽  end -->
		<a-space slot="operation" slot-scope="{ text, record, index }">
			<a-button type="primary" @click="showStatusConfirm(record)">启停用</a-button>
			<a-button type="primary" @click="showDetails(record)">详情</a-button>
			<a-button type="primary" @click="editUser(record)">编辑</a-button>
		</a-space>
		<!-- 新增或者编辑组件 -->
		<add-activity-modal ref="addActivityModal" @ok="handlerRefresh"></add-activity-modal>
		<activity-modal ref="activityModal"></activity-modal>
	</pro-table>
</template>

<script>
import { rowSelection } from '@/mixins'; //列表页面的一些公用方法
import addActivityModal from './module/addActivityModal'; //新增或编辑组件
import activityModal from './module/activityModal';
import { api } from '@/api/index.js';
const columns = [
	{
		title: '活动名称',
		dataIndex: 'activityName',
		key: 'activityName',
		ellipsis: true,
		scopedSlots: { customRender: 'activityName' },
		/* 筛选列表 */
		searchInfo: {
			type: 'String' //筛选类型 参考filterbar readme
		}
	},
	{
		title: '活动状态',
		dataIndex: 'status',
		key: 'status',
		scopedSlots: { customRender: 'status' }
	},
	{
		title: '活动联系方式',
		dataIndex: 'telPhone',
		key: 'telPhone',
		/* 筛选列表 */
		searchInfo: {
			type: 'String' //筛选类型 参考filterbar readme
		}
	},
	{
		title: '操作',
		key: 'operate',
		dataIndex: 'operate',
		scopedSlots: { customRender: 'operation' },
		align: 'center',
		width: 260
	}
];
export default {
	name: 'activitylist',
	mixins: [rowSelection],
	data() {
		return {
			columns,
			filter: {},
			loadDataUrl: api.getActivityList //查询列表接口，请在 api/index.js中配置
		};
	},
	components: { addActivityModal, activityModal },
	filters: {},
	methods: {
		/* 刷新列表当前页 */
		handlerRefresh(type = true) {
			this.$refs.protable.handlerRefresh(type);
		},
		showStatusConfirm(record) {
			let _this = this;
			this.$confirm({
				title: '提示',
				content: '你确定要' + (record.status == 0 ? '停用' : '启用') + '这个活动吗？',
				class: 'confirmbox',
				okType: 'danger',
				onOk() {
					_this.changeEnable(record.id);
				},
				onCancel() {}
			});
		},
		changeEnable(id) {
			this.$postAction(api.changeEnable, {
				id
			}).then(res => {
				if (res.result) {
					this.$message.success('改变成功');
					this.handlerRefresh(false);
				}
			});
		},

		/* 编辑 /添加*/
		editUser(record) {
			this.$refs.addActivityModal.add(record);
		},

		showDetails(record) {
			this.$refs.activityModal.show(record);
		}
	}
};
</script>

<style></style>
